<template>
  <div class="full-box">
    <el-row class="table-hand">
      <!--表头-->
      <a href="#" class="goods-title">用户管理</a>
    </el-row>
    <el-row class="search">
      <el-col :span="12">
        <el-input placeholder="请输入用户名" style="width: 300px; margin-left: 100px;" v-model="data.query.username"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="success" style="width: 300px; margin-left: 100px;" @click="Query"><el-icon><Search /></el-icon>&nbsp;&nbsp;查询</el-button>
      </el-col>
    </el-row>
    <el-button-group style="margin-left: 10px">
      <el-button type="success" class="button" @click="addListClick">
        <el-icon><Plus /></el-icon> &nbsp;
        添加
      </el-button>
    </el-button-group>
    <el-row>
      <el-table :data="data.list" class="table" >
        <el-table-column property="userId" label="用户ID"></el-table-column>
        <el-table-column property="username" label="用户名"></el-table-column>
        <el-table-column property="password" label="密码"></el-table-column>
        <el-table-column property="phone" label="电话"></el-table-column>
        <el-table-column property="descs" label="角色"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm title="确定删除吗?"
                           @confirm="btnDelClick(scope.row)">
              <template #reference>
                <el-button type="danger" class="button">
                  <el-icon>
                    <Delete/>
                  </el-icon>&nbsp;
                  删除
                </el-button>
              </template>
            </el-popconfirm>
            <el-button type="warning" class="button" @click="mod(scope.row)">
              <el-icon>
                <Edit/>
              </el-icon>&nbsp;
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-row>

  </div>
  <el-dialog v-model="data.centerDialogVisible" title="请添加" width="500" center>

    <el-form label-width="auto">

      <el-form-item label="用户名">
        <el-input v-model="data.form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="data.form.phone"></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="data.form.roleId" placeholder="请选择角色">
          <el-option v-for="role in data.roleList" :label="role.descs" :value="role.dictId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Save">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="data.centerDialogVisible1" title="请修改" width="500" center>

    <el-form label-width="auto">

      <el-form-item label="用户名">
        <el-input v-model="data.update.username"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="data.update.password"></el-input>
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="data.update.phone"></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="data.update.roleId" placeholder="请选择角色">
          <el-option v-for="role in data.roleList" :label="role.descs" :value="role.dictId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="mod1">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
import axios from "axios";
// 图片and图标导入
import {ref, reactive, onMounted} from 'vue';


const data = reactive({
  list: [],
  query: {
    username: '',
  },
  roleList: [],
  centerDialogVisible: false,
  form: {
    userId: '',
    username: '',
    password: '',
    phone: '',
    roleId: ''
  },
  centerDialogVisible1: false,
  update: {
    userId: '',
    username: '',
    password: '',
    phone: '',
    roleId: ''
  },
  delete: {
    userId: '',
    username: '',
    password: '',
    phone: '',
    roleId: ''
  },
  Page: {
    currentPage: 1,
    size: "",
    total: ""
  }
})


const initRoleList = () => {
  axios(
      {
        url: "http://localhost:8080/dict/listBySuperId",
        method: "get",
        params: ""
      }
  ).then((res) => {
    data.roleList = res.data
  })
}
onMounted(() => {
  //模糊查询
  // Query();
  initList1();
  initRoleList();
})


let initList1 = () => {
  axios(
      {
        url: "http://localhost:8080/userview/list",
        method: "get",
        params: {}
      }
  ).then((res) => {
    data.list = res.data
  })
}

//查询函数实现
function Query() {
  axios({
    url: 'http://localhost:8080/user/listP',
    method: 'post',
    params: {
      username: data.query.username,
    }
  }).then((res) => {
    data.list = res.data
  })
}

//添加
let addListClick = () => {
  // 更新对话框可见性
  data.centerDialogVisible = true;
};

let mod = (row) => {
  // 更新对话框可见性
  data.centerDialogVisible1 = true;
  data.update.userId = row.userId
  data.update.username = row.username
  data.update.password = row.password
  data.update.phone = row.phone
  data.update.roleId = row.roleId
};

//添加函数
function Save() {
  axios({
    url: 'http://localhost:8080/user/add',
    method: 'post',
    params: {
      username: data.form.username,
      password: data.form.password,
      phone: data.form.phone,
      roleId: data.form.roleId
    }
  })
  data.centerDialogVisible = false;
}

//成功消息
const successMessage = (message) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//修改函数
function mod1() {
  axios({
    url: 'http://localhost:8080/user/mod',
    method: 'post',
    params: {
      userId: data.update.userId,
      username: data.update.username,
      password: data.update.password,
      phone: data.update.phone,
      roleId: data.update.roleId
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage("修改成功");
      initList1();
    } else {
      errorMessage("修改失败");
    }
  })
  data.centerDialogVisible1 = false;
}

let btnDelClick = (row) => {
  data.delete.userId = row.userId;
  del();
}

//删除函数
function del() {
  axios({
    url: 'http://localhost:8080/user/delete',
    method: 'get',
    params: {
      userId: data.delete.userId,
    }
  }).then(()=>{
    initList1();
  })
}

import {Edit, Delete, User} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
</script>

<style lang="css">
.button {
  width: 60px;
  margin-top: 10px;
}

.search {
  margin-left: 10px;
  margin-top: 10px;
}

.table {
  margin-top: 5px;
  margin-left: 10px;
  width: 1245px;
  height: 400px;
}

.full-box {
  /*margin: 15px;*/
  width: 100%;
  height: 100vh;
}

.table-hand {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 20px;
  height: 70px;
  background-color: #fffefe;
  padding: 20px;
}

.goods-title {
  color: black;
  text-decoration: underline;
  text-decoration-color: coral;
  font-size: 25px;
}
</style>